<template>
  <div class="main">
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/orders' }"
        >订单管理</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/orders' }"
        >订单列表</el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-card class="box-card"> 
      <el-row type="flex">
        <!-- 搜索 -->
        <el-col :span="8">
          <div class="grid-content bg-purple title" style="text-align: left">
            <el-input
              clearable
              placeholder="请输入内容"
              class="input-with-select"      
            >
              <el-button
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" border style="width: 100%  margin-top:10px">
        <el-table-column type="index" label="#" width="50" align="center">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="150" align="center">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="150" align="center">
          <template slot-scope="scope">
            <el-tag type="danger"  v-if="scope.row.pay_status==0">未付款</el-tag>
            <el-tag type="sucesss" v-else>已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="150" align="center">
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间"  align="center">
          <template slot-scope="scope">
             {{scope.row.create_time |formDate}}
           </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <!-- <el-row> -->
              <el-tooltip class="item" 
              effect="dark"
               content="修改订单地址" 
               placement="top">
                <el-button type="primary" 
                  icon="el-icon-edit" 
                  size="mini"
                  @click="handleEditAddress(scope.$index, scope.row)"
                  >
                </el-button>
              </el-tooltip>
            <el-tooltip
             class="item"
              effect="dark" 
              content="物流信息" 
              placement="top">
            <el-button type="success" 
            icon="el-icon-location" 
            size="mini"
            @click="handleEditPostMan(scope.$index, scope.row)"
            >
            </el-button>
            </el-tooltip>
            <!-- <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            > -->
            <!-- <el-button
              size="mini"
              type="success"
              @click="allocatedLimits(scope.$index, scope.row)"
              >物流信息</el-button
            > -->
          </template>
            <!-- </el-row> -->
        </el-table-column>
      </el-table>
    </el-card>
    <!--  分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[5, 10]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalpage"
    >
    </el-pagination>

        <!--  弹框修改地址 -->

    <el-dialog title="收货地址" :visible.sync="addressDialog">
      <el-form :model="addressForm" :rules="rules">
        <el-form-item
          label="省市区/县"
          prop="address1"
          :label-width="formLabelWidth"
        >
          <!-- <el-input v-model="addressForm.address1" autocomplete="off"></el-input> -->

          <el-cascader
            v-model="addressForm.address1"
            :options="cityData"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>

        <el-form-item
          label="详细地址"
          prop="address2"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addressForm.address2"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDecidedAddress">取 消</el-button>
        <el-button type="primary" @click="decidedAddress">确 定</el-button>
      </div>
      <!-- addressDialog = false -->
    </el-dialog>
    <!--  物流信息 -->
    <el-dialog title="物流进度" :visible.sync="postManDialog">
      <el-timeline>
        <!-- :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size" -->
        <el-timeline-item
          v-for="(activity, index) in postManList"
          :key="index"
          :timestamp="activity.ftime"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPostManDialog">取 消</el-button>
        <el-button type="primary" @click="decidedPostManDialog"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrders, getPostMan } from "../../api/index";
import cityData from "./citydata";
export default {
  name: "", // keep-alive 使用的
  data(){
    return{
      tableData: [],
      totalpage: 0, //总页数
      params: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      addressDialog: false,
      addressForm: {
        address1: "",
        address2: "",
      },
      formLabelWidth: "100px",
      rules: {
        address1: [
          { required: true, message: "请输入省市区", trigger: "blur" },
        ],
        address2: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
      cityData,
      postManDialog: false,
      postManList: [], // 初始化物流信息
    };
  },
  created(){
    this.initGetOrders();
    this.getColor();
  },
  methods:{
    async initGetOrders() {
    let {data:{goods,total,pagenum},meta:{msg,status}} = await getOrders(this.params)
      // console.log(total);
      this.tableData = goods;
      // console.log(goods[0].order_number)
      if (status != 200) return this.$message.error("请求失败");
      this.totalpage = total;
    },
    //分页功能
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
      this.initGetOrders();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.initGetOrders();
    },
    //搜索功能
    // getSearchOrders(){
    //   this.initGetOrders();
    // },
    // 修改地址
     handleEditAddress(i, scope) {
      this.addressDialog = true;
    },
    //三级联动获取选择后的值
    handleChange(value) {
      // console.log(value);
    },
    // 真正的更改地址
    decidedAddress() {
      this.addressDialog = false;
    },
    cancelDecidedAddress() {
      this.addressDialog = false;
      this.addressForm = {};
    },
    getColor(){
      var arr = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
      ];
      var str = "#";
      for(var i = 0; i<6; i++){
        function getRandom(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var re = arr[getRandom(0, arr.length - 1)];
        str += re;
      }
      return str.toLowerCase();
    },
    //物流信息
    async handleEditPostMan() {
       this.postManDialog = true;
      let {data,meta:{status}}  = await getPostMan({ id:1106975712662 });
      // data  没有 color  字段
      if(status!=200) return  this.$message.error('请求失败')
      // 进行数据处理
      // var colorTypeArr = [];
       for (var i = 0; i < data.length; i++) {
        let newStr = this.getColor();
        let obj = { type: "primary", icon: "el-icon-more", color: newStr };

        // if (i % 2 == 0) {
        //   obj.type = "success";
        // } else {
        //   obj.type = "primary";
        // }
        i % 2 == 0?obj.type = "success": obj.type = "primary"

        data[i] = { ...data[i], ...obj };
      }
      this.postManList = data; 
    },
    cancelPostManDialog() {
      this.postManDialog=false

    },
    decidedPostManDialog() {
       this.postManDialog=false
    },
  },
  //付款
  filters:{
  'pay_status':function(val,filterParams) {
       switch (val.pay_status) {
         case '0':
             return  '未付款'
          default:
           return '已付款'
       }
    }
}
}
</script>

<style scoped>
.main {
  padding-left: 20px;
  margin-top: 20px;
  overflow: auto;
}
.box-card {
  width: 1200px;
}
.el-pagination {
  margin: 20px auto;
  text-align: center;
}
</style>